<template>
  <a-popover trigger="contextmenu" v-model:visible="visible" :overlayClassName="`${prefixCls}-popover`" :getPopupContainer="getPopupContainer" :placement="position">
    <template #title>
      <span>{{ title }}</span>
      <span style="float: right" title="关闭">
        <Icon icon="ant-design:close-outlined" @click="visible = false" />
      </span>
    </template>
    <template #content>
      <a-textarea ref="textareaRef" :value="innerValue" :disabled="disabled" :style="textareaStyle" v-bind="attrs" @input="onInputChange" />
    </template>
    <a-input :class="`${prefixCls}-input`" :value="innerValue" :disabled="disabled" v-bind="attrs" @change="onInputChange">
      <template #suffix>
        <Icon icon="ant-design:fullscreen-outlined" @click.stop="onShowPopup" />
      </template>
    </a-input>
  </a-popover>
</template>

<script lang="ts" setup>
  import { computed, nextTick, ref, watch } from 'vue'
  import Icon from '/@/components/Icon/src/Icon.vue'
  import { useAttrs } from '/@/hooks/core/useAttrs'
  import { propTypes } from '/@/utils/propTypes'
  import { useDesign } from '/@/hooks/web/useDesign'

  const { prefixCls } = useDesign('j-input-popup')
  const props = defineProps({
    // v-model:value
    value: propTypes.string.def(''),
    title: propTypes.string.def(''),
    // 弹出框显示位置
    position: propTypes.string.def('right'),
    width: propTypes.number.def(300),
    height: propTypes.number.def(150),
    disabled: propTypes.bool.def(false),
    // 弹出框挂载的元素ID
    popContainer: propTypes.oneOfType([propTypes.string, propTypes.func]).def(''),
  })
  const attrs = useAttrs()
  const emit = defineEmits(['change', 'update:value'])

  const visible = ref<boolean>(false)
  const innerValue = ref<string>('')
  // textarea ref对象
  const textareaRef = ref()
  // textarea 样式
  const textareaStyle = computed(() => ({
    height: `${props.height}px`,
    width: `${props.width}px`,
  }))

  watch(
    () => props.value,
    (value) => {
      if (value && value.length > 0) {
        innerValue.value = value
      }
    },
    { immediate: true }
  )

  function onInputChange(event) {
    innerValue.value = event.target.value
    emitValue(innerValue.value)
  }

  async function onShowPopup() {
    visible.value = true
    await nextTick()
    textareaRef.value?.focus()
  }

  // 获取弹出框挂载的元素
  function getPopupContainer(node) {
    if (!props.popContainer) {
      return node.parentNode
    } else if (typeof props.popContainer === 'function') {
      return props.popContainer(node)
    } else {
      return document.getElementById(props.popContainer)
    }
  }

  function emitValue(value) {
    emit('change', value)
    emit('update:value', value)
  }
</script>

<style lang="less">
  //noinspection LessUnresolvedVariable
  @prefix-cls: ~'@{namespace}-j-input-popup';

  .@{prefix-cls} {
    &-popover {
    }

    &-input {
      .app-iconify {
        cursor: pointer;
        color: #666666;
        transition: color 0.3s;

        &:hover {
          color: black;
        }
      }
    }
  }
</style>
